<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8">
		<title>鼠标跟随十字JS特效代码 | 编程狮(w3cschool.cn)</title>
	</head>
	<body style="margin: 0;">
		<div id="html"></div>
		<script type="text/javascript">

			var ox = document.createElement('div');
			var oy = document.createElement('div');
			
			ox.style.width = '100%';
			ox.style.height = '1px';
			ox.style.backgroundColor = '#ddd';
			ox.style.position = 'fixed';
			ox.style.left = 0;
			document.body.appendChild(ox);
			
			oy.style.height = '100%';
			oy.style.width = '1px';
			oy.style.backgroundColor = '#ddd';
			oy.style.position = 'fixed';
			oy.style.top = 0;
			document.body.appendChild(oy);

			document.onmousemove = function(e){
				var e = e || event;
				var x = e.pageX;
				var y = e.pageY;
				ox.style.top = y + 'px';
				oy.style.left = x + 'px';
				document.getElementById('html'). innerHTML = 'x : ' + x + '<br/>y : ' + y;
			};
		</script>
	</body>
</html>